<template>
  <div class="popular-recommend">
    <!-- pc热门推荐导航栏 start -->
    <home-nav title="热门推荐" @jumpPlaylist="jumpPlaylist" v-if="store.isFlag">
      <template v-slot:tags>
          <span
              @click="jumpPlaylist(tag)"
              v-for="tag in tags"
              :key="tag.id"
              class="tags ml-4 mr-4"
              :class="styleTags.hoverTransition"
          >
          {{ tag.name }}
         </span>
      </template>
    </home-nav>
    <!-- pc热门推荐导航栏 end -->
    <!-- 移动端热门推荐导航栏 start -->
    <van-dropdown-menu v-else class="w-full mb-1" active-color="white">
      <van-dropdown-item title="热门推荐" v-model="mobileNavigation">
        <van-cell class="text-center" :title="tag.name" v-for="tag in tags" :key="tag.id"
                  @click="jumpPlaylist(tag)"></van-cell>
      </van-dropdown-item>
    </van-dropdown-menu>
    <!-- 移动端热门推荐导航栏 end-->
    <song-list-layout :playlists="playlists" @jumpPlayListDetails="jumpPlayListDetails" @play="play"/>

  </div>
</template>

<script setup>
import {reactive, toRefs, ref} from 'vue'
import {useRouter} from 'vue-router'
import {useStore} from "@/store/index"

import HomeNav from '@/components/HomeNav/index.vue'
import SongListLayout from '@/components/SongListLayout/index.vue'

const store = useStore()
const router = useRouter()
// 接口返回的数据
const hotRecommend = reactive({
  tags: [],
  playlists: [],
  styleTags: {
    hoverTransition: ['transition duration-200 yu-textColor-hover cursor-pointer yu-textColor-hover']
  }
})
// 热门推荐标题
store.getPlaylistHot(6).then(tags => {
  hotRecommend.tags = tags // 这里报警告的原因是没考虑接口报错所以类型不匹配
})

// 热门推荐数据
store.getSongList().then(result => {
 hotRecommend.playlists = result  // 这里报警告的原因是没考虑接口报错所以类型不匹配
})

// 携带参数cat="华语"跳转到歌单，没有值就是默认
const jumpPlaylist = (tag = '') => {
  let query
  if (tag) {
    query = {
      cat: tag.name
    }
  }
  router.push({
    path: '/discover/song-list',
    query: query
  })
}
// 跳转到歌单详情
const jumpPlayListDetails = (id = '') => {
  router.push({
    path: '/play-list-detail',
    query: {id: id}
  })
}
// 播放歌单音乐
const play = (id) => {
  // 获取数据歌单数据
  store.getPlaylistDetail(id)
}
// 移动端导航
const mobileNavigation = ref(0);

// 解构数据
const {tags, playlists, styleTags} = toRefs(hotRecommend)
</script>

<style lang="scss" scoped>
.van-dropdown-menu {
  position: relative;

  :deep(.van-dropdown-menu__bar) {
    background-color: v-bind('store.theme.HoverBgColor');
  }
  // 不活动的样式
  :deep(.van-dropdown-menu__title) {
    color: v-bind('store.theme.hoverTextColor')!important;
  }
  // 活动的样式
  :deep(.van-ellipsis) {
    color: v-bind('store.theme.textColor');
  }
  .van-dropdown-item {
    position: fixed;
    top: 0;
    left: 10px;
    right: 10px;
    height: 100%;
  }
}
:deep(.van-popup) {
  .van-cell {
    background-color: v-bind('store.theme.secondaryBgColor');
    color: v-bind('store.theme.textColor');
  }
}
</style>
